<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>四个模板练习</title>
</head>

<body>
    <!-- 第一个模块 -->
    <div class="welcome">
        <div class="welcome_box">
            <div class="container">
                <div class="welcome_title">
                    <h2>welcome To Maker Cloud</h2>
                    <p>服务项目</p>
                </div>
                <div class="weicome_list">
                    <ul class="row">
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome1.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>结婚照</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome2.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>亲子照</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome3.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>写真集</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome4.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>证件照</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome5.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>艺术照</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="weicome_list_box">
                                <img src="img/welcome6.jpg" alt="">
                                <div class="weicome_list_txt">
                                    <h4>照片美化</h4>
                                    <p>此处为产品分类里的详细说明，该分类为项目服务下的产品分类。 首页的该分类对应的图片为此分类的 ...
                                    </p>
                                    <a href="#">了解更多</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 第二个模板 -->
    <div class="about">
        <div class="about_box">
            <div class="container">
                <div class="row">
                    <div class="about_title col-lg-12 col-md-12 col-sm-12">
                        <p>关于我们</p>
                        <img src="img/welcome8.jpg" alt="">
                        <p>此处为单页公司简介的内容，注意公司简介的的id=80,为网站默认的公司简介id。如以删除，需要将首页调用的公司简介id修改为正确的id。在首页的关于我们下面的图片为公司简介的缩略 图，建议图片大小为500X120.注意，在线留言使用的页面模板为contact。
                        </p>
                        <a href="#">了解详细</a>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- 第三个模板 -->
    <div class="gallery">
        <div class="gallery_box">
            <div class="container">
                <div class="gallery_title">
                    <img src="img/title.png" alt="">
                    <p>作品展示/GALLERY</p>
                </div>
                <div class="gallery_list">
                    <ul class="row">
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                        <li class="col-lg-4 col-md-6 col-sm-12">
                            <div class="gallery_list_box">
                                <img src="img/welcome7.jpg" alt="">
                                <p>作品相片</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <a href="#">查看更多</a>
            </div>

        </div>
    </div>
    <!-- 第四个模板 -->
    <div class="newest">
        <div class="newest_box">
            <div class="container">
                <div class="newest_title">
                    <h2>最新资讯</h2>
                    <p>LATEST NEWS</p>
                </div>
                <div class="newest_list">
                    <ul class="row">
                        <li class="col-lg-6 col-md-12 col-12">
                            <div class="newest_list_box row">
                                <img src="img/welcome9.jpg" class="col-lg-4 col-md-4 col-5" alt="">
                                <div class="col-lg-8 col-md-8 col-7">
                                    <h4>测试文章</h4><br>
                                    <p>这里是测试文章1。这里是测试文章1。这里是测试文章1。 这里是测试文章1。这里是测试文章1。这里是测试 ... ...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-12 col-12">
                            <div class="newest_list_box row">
                                <img src="img/welcome10.jpg" class="col-lg-4 col-md-4 col-5" alt="">
                                <div class="col-lg-8 col-md-8 col-7">
                                    <h4>测试文章</h4><br>
                                    <p>这里是测试文章1。这里是测试文章1。这里是测试文章1。 这里是测试文章1。这里是测试文章1。这里是测试 ... ...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-12 col-12">
                            <div class="newest_list_box row">
                                <img src="img/welcome11.png" class="col-lg-4 col-md-4 col-5" alt="">
                                <div class="col-lg-8 col-md-8 col-7">
                                    <h4>测试文章</h4><br>
                                    <p>这里是测试文章1。这里是测试文章1。这里是测试文章1。 这里是测试文章1。这里是测试文章1。这里是测试 ... ...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-12 col-12">
                            <div class="newest_list_box row">
                                <img src="img/welcome12.png" class="col-lg-4 col-md-4 col-5" alt="">
                                <div class="col-lg-8 col-md-8 col-7">
                                    <h4>测试文章</h4><br>
                                    <p>这里是测试文章1。这里是测试文章1。这里是测试文章1。 这里是测试文章1。这里是测试文章1。这里是测试 ... ...</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>